<template>
  <view class="container">
    <view class="inputForm" v-if="!registed">
      <view class="input-info">
        <view class="info">
          <uni-easyinput
            type="text"
            maxlength="10"
            class="input"
            v-model="input.name"
            placeholder="请输入姓名"
          />
        </view>
        <view class="info">
          <uni-easyinput
            type="text"
            maxlength="20"
            class="input"
            v-model="input.company"
            placeholder="请输入公司名称"
          />
        </view>
        <view class="info">
          <uni-easyinput
            type="number"
            maxlength="11"
            class="input"
            v-model="input.phoneNum"
            placeholder="请输入联系人手机号"
          />
        </view>
      </view>
      <view class="btn-info">
        <button type="primary" @click="onRegister" :disabled="!isReady">
          帐户申请
        </button>
      </view>
    </view>
    <view class="result" v-if="registed">
      <text class="article">帐户申请已经发出\n</text>
      <text class="article">请等待工作人员与您联系</text>
    </view>
  </view>
</template>

<script>
import { register } from "../../apis/api";

export default {
  data() {
    return {
      isReady: false,
      registed: false,
      // 表单
      input: {
        phoneNum: "",
        name: "",
        company: "",
      },
    };
  },
  methods: {
    validate() {
      if (!this.input.name) {
        return Promise.reject({ message: "请输入姓名" });
      }
      if (!this.input.company) {
        return Promise.reject({ message: "请输入公司名称" });
      }
      if (!this.input.phoneNum) {
        return Promise.reject({ message: "请输入联系人手机号" });
      }
      if (!/^1[3456789]\d{9}$/.test(this.input.phoneNum)) {
        return Promise.reject({ message: "请输入正确的手机号" });
      }
      return Promise.resolve();
    },

    onRegister() {
      this.validate()
        .then(() => {
          uni.showLoading({
            title: "申请中...",
          });

          let user = {
            phoneNum: this.input.phoneNum,
            name: this.input.name,
            company: this.input.company,
          };

          register(user)
            .then((res) => {
              let result = res.data.result;
              if (result.status === 1) {
                uni.hideLoading();
                this.registed = true;
              } else {
                return Promise.reject({ message: result.message });
              }
            })
            .catch((err) => {
              uni.hideLoading();
              uni.showModal({
                content: err.message,
                showCancel: false,
              });
            });
        })
        .catch((err) => {
          uni.showToast({
            title: err.message,
            icon: "none",
          });
        });
    },
  },
  watch: {
    input: {
      handler(newValue, oldValue) {
        if (!newValue.phoneNum || !newValue.name || !newValue.company) {
          this.isReady = false;
        } else {
          this.isReady = true;
        }
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss">
@import "register.scss";
</style>
